<template>
<div class="echartsDom" ref="echartsDom"></div>
</template>

<script>
import * as echarts from 'echarts'
import { useStore } from 'vuex'
import { defineComponent, reactive, toRefs, onMounted, computed, getCurrentInstance, watch } from 'vue'
export default defineComponent({
    name: 'Echarts',
    setup() {
        const { proxy } = getCurrentInstance()
        const store = useStore()
        const initChart = ()=>{ // 渲染 echarts 的函数
            proxy.initChartData()

            if(proxy.echart){ // 判断 echarts 实例是否存在，存在则直接渲染，不存在获取 dom ，初始化 dom 再渲染
                proxy.echart.clear() // 清空画布
                proxy.echart.resize() // 重新获取新的画布尺寸
                proxy.echart.setOption(proxy.option)
            }else{
                proxy.echart = echarts.init(proxy.$refs.echartsDom)
                proxy.echart.setOption(proxy.option)
            }
        }
        const initChartData = ()=>{ // 初始化 echarts 的函数
            if(proxy.isAxisChar){ // 折线图或柱状图配置
                proxy.axisOption.xAxis.data = proxy.chartData.xData
                proxy.axisOption.series = proxy.chartData.series
            }else{ // 饼图配置
                proxy.normalOption.series = proxy.chartData.series
            }
        }

        const data = reactive({
            axisOption:{ // 折线图或柱状图数据模版
                legend:{
                    textStyle: { color: "#FFFDFE" }, // 图例文字颜色
                    top: '4%'
                },
                grid:{
                    top: '18%',
                    right: '5%',
                    bottom: '5%',
                    left: '5%',
                    containLabel: true,
                },
                tooltip:{ // 提示框
                    trigger: 'axis',
                },
                xAxis:{
                    type: 'category',
                    data: [],
                    axisLine:{
                        lineStyle:{
                            color: '#17b3a3',
                        },
                    },
                    axisLabel:{
                        interval: 0,
                        color: '#cfd2d9'
                    },
                },
                yAxis:[
                    {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                                color: '#17b3a3',
                            },
                        },
                    },
                ],
                color:[
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series:[]
            },
            normalOption:{ // 饼图数据模版
                tooltip:{
                    trigger:"item",
                },
                color:[
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series:[],
            },
            echart:null, // echarts 实例
            initChart,
            initChartData,
        })

        const option = computed(()=>{ // 根据是否折线图和柱状图或饼图返回不同配置模版数据
            return proxy.isAxisChar ? data.axisOption : data.normalOption
        })
        watch(proxy.chartData, ()=>{
            initChart()
        }, { deep: true })
        watch(()=>store.state.Aside.isCollapse, ()=>{
            proxy.timer = setTimeout(() => {
                initChart()
                clearTimeout(proxy.timer)
            }, 300)
        })
        watch(()=>store.state.windowWidth, ()=>{
            initChart()
        })

        onMounted(() => {
            initChart()
        })
        return {
            ...toRefs(data),
            option
        }
    },
    props:{
        isAxisChar:{ // 传入的是否折线图和柱状图或饼图
            type: Boolean,
            default: true
        },
        chartData:{ // 传入的配置数据
            type: Object,
            default(){
                return {
                    xData:[],
                    series:[],
                }
            }
        },
    },
})
</script>

<style scoped>
    
</style>